import classnames from 'classnames'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/types/store'
import { addChannel, changeActive, delChannel } from '@/store/actions/channel'
import _ from 'lodash'
import { useState } from 'react'
import { Channel } from '@/types/data'
import { Toast } from 'antd-mobile'
// console.log(classnames('a', { b: false })) // ===> a b
type Props = {
  hide: () => void
}
const Channels = ({ hide }:Props) => {
  // 是否处于编辑状态
  const [isEdit, setIsEdit] = useState(false)
  const toggleIsEdit = () => { setIsEdit(!isEdit) }

  // active: 选中的频道的id
  const { userChannels, active } = useSelector((state: RootState) => state.channel)

  // 可选频道
  const optionChannel = useSelector((state: RootState) => {
    const { allChannels, userChannels } = state.channel
    // 从allChannels中找出 没有出现在 userChannels 中的元素
    // return allChannels.filter(it => {
    //   const t = userChannels.find(item => item.id === it.id)
    //   // if (it在userChannels中找不到) {
    //   if (!t) {
    //     return true
    //   } else {
    //     return false
    //   }
    // })
    return _.differenceBy(allChannels, userChannels, 'id')
  })
  console.log('optionChannel', optionChannel)

  const dispatch = useDispatch()

  // 添加
  const doAddChannel = (channal: Channel) => {
    console.log(channal)
    dispatch(addChannel(channal))
  }

  // 判断是否可以做删除
  const canDel = (id: number) => {
    if (id === 0) { // 推荐
      Toast.show('推荐不能删除')
      return false
    }
    if (id.toString() === active) {
      Toast.show('当前频道不能删除')
      return false
    }
    if (userChannels.length <= 4) {
      Toast.show('最少保留4个频道')
      return false
    }
    return true
  }
  // 用户点击 我的频道 中某一项
  // 1. 当isEdit为true， 做删除
  // 2. 当isEdit为false, 做 切换频道
  const click = async (id:number) => {
    if (isEdit) {
      if (!canDel(id)) {
        return
      }
      await doDelChannel(id)
      Toast.show('删除成功')
    } else {
      dispatch(changeActive(id.toString()))
      // 关闭弹层
      hide()
    }
  }
  const doDelChannel = (id: number) => {
    dispatch(delChannel(id))
  }

  return (
    <div className={styles.root}>
      <div className="channel-header">
        <Icon type="iconbtn_channel_close" onClick={hide}/>
      </div>
      <div className="channel-content">
        {/* 编辑时，添加类名 edit */}
        <div className={classnames('channel-item', { edit: isEdit })}>
          <div className="channel-item-header">
            <span className="channel-item-title">我的频道</span>
            <span className="channel-item-title-extra">{isEdit ? '点击删除频道' : '点击进入频道'}</span>
            <span className="channel-item-edit" onClick={toggleIsEdit}>{isEdit ? '保存' : '编辑'}</span>
          </div>
          {/* 这里放置我的频道 */}
          <div className="channel-list">
            {/* 选中时，添加类名 selected */}

            {/* className={it.id.toString() === active ? 'selected channel-list-item' : 'channel-list-item'}> */}
            {
              userChannels.map(it => (
              <span
                onClick={() => click(it.id)}
                key={it.id}
                className={classnames('channel-list-item', { selected: it.id.toString() === active })}>
                {it.name} {(it.id !== 0 && it.id.toString() !== active) && <Icon type="iconbtn_tag_close" />}
              </span>))
            }
          </div>
        </div>

        <div className="channel-item">
          <div className="channel-item-header">
            <span className="channel-item-title">频道推荐</span>
            <span className="channel-item-title-extra">点击添加频道</span>
          </div>

          {/* 这里放置推荐频道 */}
          <div className="channel-list">
          {
            optionChannel.map(it => (<span key={it.id} onClick={() => doAddChannel(it)} className="channel-list-item">+ {it.name}</span>))
          }

          </div>
        </div>
      </div>
    </div>
  )
}

export default Channels
